<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
 ?>
<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('#mycarousel').jcarousel({
		wrap: 'circular'
    });
	//pop up image
	// $("a[rel=group]").fancybox({
		// 'transitionIn' : 'elastic',
		// 'transitionOut' : 'elastic', 
		// 'titlePosition' : 'over'
	// }); 
	$("ul#mycarousel li").click(function(event){
		console.log("clicked");
		event.preventDefault();
		var id = $(this).find("a").attr("id");
		var img = $(this).find("a").attr("href");
		var title = $(this).find("a").attr("title");
		$("#sliderImg").html('<li><a title="Xem chi tiết" href="<?php echo JURI::base();?>index.php?option=com_comsldr&view=chitiet&Itemid=<?php echo $Itemid;?>&catid='+id+'#content"><img class="captify" rel="captionb" src="'+img+'" alt="" /><div id="captionb">'+title+'</div></a></li>');
		captify();
	});
});
</script>
<div id="intro">
    <div id="outerscroll">
        <div class=" jcarousel-skin-ie7">
		<div class="jcarousel-container jcarousel-container-horizontal" id="scroll" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
				<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 1944px;">
				<?php 
				//print_r($listItems);
				foreach($listItems as $i=> $item){
					$image  = json_decode($item->params);
				?>
					<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-<?php echo ($i+1);?> jcarousel-item-<?php echo ($i+1);?>-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="<?php echo ($i+1);?>"><a rel="group" id = "<?php echo $item->id;?>" title="<?php echo $item->title;?>" href="<?php echo $image->image;?>"><img width="260px" height="160px" alt="" src="<?php echo $image->image;?>"></a></li>
				<?php }?>					
				</ul>
			</div>
        <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;" disabled="false"><div class="btn"></div></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"><div class="btn"></div></div>
		</div>
		</div><!-- #scroll -->
    </div><!-- #outerscroll -->
</div>